import React from "react";
import { useUndo } from "hooks";
import { Button } from "antd";

const Undo = () => {
  const [{ present }, { set, rest, undo, redo, canRedo, canUndo }] = useUndo(0);

  return (
    <div style={{ padding: 30 }}>
      <div>{present as number}</div>
      <Button onClick={() => set((present as number) + 1)}>+</Button>
      <Button onClick={() => set((present as number) - 1)}>-</Button>
      <Button onClick={undo} disabled={!canUndo}>
        undo
      </Button>
      <Button onClick={redo} disabled={!canRedo}>
        redo
      </Button>
      <Button onClick={() => rest(0)}>reset to 0</Button>
    </div>
  );
};

export default Undo;
